<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="../js/showImg.js"></script>
</head>
<body>
<div id="app">
    <!--1.添加的模态框-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加app</h4>
                </div>
                <div class="modal-body">
                    <form class="text-center form-inline" id="addFormId" enctype="multipart/form-data">
                        <p>
                            <img src="" height="100px" width="100px" id="addImg">
                        </p>

                        <p>
                            app名称:<input type="text" name="appName" class="form-control" style="width:400px"
                                         placeholder="请输入app名称">
                        </p>
                        <p>
                            app大小:<input type="text" name="appSize" class="form-control" style="width:400px"
                                         placeholder="请输入大小">
                        </p>
                        <p>
                            app类型:
                            <select name="appTypeId" class="form-control" style="width:400px">
                                <option value="0">请选择类型</option>
                                <option v-for="appType in appTypeList" :value="appType.id">{{appType.typeName}}</option>
                            </select>
                        </p>
                        <p>
                            app平台:
                            <select class="form-control" style="width:400px" name="appPlatformId">
                                <option value="0">请选择平台</option>
                                <option v-for="appPlatform in appPlatformList" :value="appPlatform.id">
                                    {{appPlatform.platformName}}
                                </option>
                            </select>
                        </p>
                        <p>
                            下载次数:<input type="number" name="appCount" min="0" value="0" class="form-control"
                                        style="width:400px" placeholder="请输入下载次数" readonly>
                        </p>

                        <p>
                            app图片:<input type="file" onchange="getImg(this,addImg)" name="appImg" class="form-control"
                                         style="width:400px">
                        </p>
                        <p><input type="hidden" name="appStatus" value="0"></p>
                        <p>
                            <button type="button" class="btn btn-info" @click="addApp()">确认添加</button>
                            <button type="button" class="btn btn-info" data-dismiss="modal">返回首页</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!--2.修改的模态框-->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改app</h4>
                </div>
                <div class="modal-body">
                    <form class="text-center form-inline" id="updateFormId">
                        <p>
                            <img :src="updateApp.appImg" height="100px" width="100px" id="updateImg">
                        </p>
                        <p>
                            app编号:<input readonly type="text" name="id" class="form-control" style="width:400px"
                                         placeholder="请输入app编号" :value="updateApp.id">
                        </p>
                        <p>
                            app名称:<input type="text" name="appName" class="form-control" style="width:400px"
                                         placeholder="请输入app名称" :value="updateApp.appName">
                        </p>
                        <p>
                            app大小:<input type="text" name="appSize" class="form-control" style="width:400px"
                                         placeholder="请输入大小" :value="updateApp.appSize">
                        </p>
                        <p>
                            app类型:
                            <select class="form-control" style="width:400px" name="appTypeId"
                                    :value="updateApp.appTypeId">
                                <option value="0">请选择类型</option>
                                <option v-for="appType in appTypeList" :value="appType.id">{{appType.typeName}}</option>
                            </select>
                        </p>
                        <p>
                            app平台:
                            <select class="form-control" style="width:400px" name="appPlatformId"
                                    :value="updateApp.appPlatformId">
                                <option value="0">请选择平台</option>
                                <option v-for="appPlatform in appPlatformList" :value="appPlatform.id">
                                    {{appPlatform.platformName}}
                                </option>
                            </select>
                        </p>
                        <p>
                            下载次数:<input type="number" name="appCount" min="0" value="0" class="form-control"
                                        style="width:400px" placeholder="请输入下载次数" readonly :value="updateApp.appCount">
                        </p>
                        <p>
                            app图片:<input type="file" onchange="getImg(this,updateImg)" name="appImg"
                                         class="form-control" style="width:400px">
                        </p>

                        <p>
                            <button type="button" class="btn btn-info" @click="updateAppa">确认修改</button>
                            <button type="button" class="btn btn-info" data-dismiss="modal">返回首页</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row table-bordered" style="margin-top: 20px;line-height: 100px">
                    <div class="col-md-8 form-inline text-center">
                        <form id="searchFormId">
                            <input type="hidden" name="nowPage" id="pageNum">
                            <input type="hidden" name="pageCout" id="pageCout">
                            名称:<input type="text" placeholder="请输入软件名称" class="form-control" style="width: 150px"
                                      name="appName">
                            类型:
                            <select class="form-control" name="appTypeId">
                                <option value="0">请选择类型</option>
                                <option v-for="appType in appTypeList" :value="appType.id">{{appType.typeName}}</option>
                            </select>
                            软件平台:
                            <select class="form-control" name="appPlatformId">
                                <option value="0">请选择平台</option>
                                <option v-for="appPlatform in appPlatformList" :value="appPlatform.id">
                                    {{appPlatform.platformName}}
                                </option>
                            </select>
                            <input type="button" class="btn btn-primary" value="搜索" @click="searchApp()">
                        </form>
                    </div>

                    <div class="col-md-4 navbar-right text-center">
                        <button type="button" class="btn btn-warning" @click="deleteManyApp">
                            <span class="glyphicon glyphicon-plus"></span>批量删除
                        </button>
                        <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#addModal">
                            <span class="glyphicon glyphicon-plus"></span>添加
                        </button>
                    </div>
                </div>

                <div class="row" style="margin-top: 20px">
                    <table class="table-bordered col-md-12 text-center">
                        <tr style="line-height: 50px">
                            <td><input type="checkbox" class="all" @change="allSel"> 全选/全消</td>
                            <td>编号</td>
                            <td>名称</td>
                            <td>大小</td>
                            <td>类型</td>
                            <td>软件平台</td>
                            <td>下载次数</td>
                            <td>图片</td>
                            <td colspan="2">操作</td>
                        </tr>
                        <tbody>
                        <tr v-for="(app,index) in appList" :key="index">
                            <td>选择<input type="checkbox" :value="app.id" class="sel" @change="checkSel"></td>
                            <td>{{app.id}}</td>
                            <td>{{app.appName}}</td>
                            <td>{{app.appSize}}M</td>
                            <td>{{app.appType.typeName}}</td>
                            <td>{{app.appPlatform.platformName}}</td>
                            <td>{{app.appCount}}次</td>
                            <td>
                                <img :src="app.appImg" width="50px">
                            </td>
                            <td>
                                <button class="btn btn-danger" type="button" @click="deleteApp(app.id)">
                                    <span class="glyphicon glyphicon-remove"></span>删除
                                </button>
                            </td>
                            <td>
                                <button @click="showApp(index)" type="button" class="btn btn-primary"
                                        data-toggle="modal" data-target="#updateModal">
                                    <span class="glyphicon glyphicon-edit"></span>修改
                                </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                </div>
                <div class="text-center">
                    <ul class="pager">
                        <li @click="changePage(-1)"><a href="#">&laquo;</a></li>
                        <li v-for="page in pageList" @click="changePage(page)"><a href="#">{{page}}</a></li>
                        <li @click="changePage(-2)"><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    let pageCout = 4;
    let vue = new Vue({
        el: "#app",
        data: {
            appList: [],
            pageList: [],
            appTypeList: [],
            appPlatformList: [],
            updateApp: {},
        },
        methods: {
            queryAllApp(nowPage) {
                $('#pageNum').val(nowPage);
                $('#pageCout').val(pageCout);
                $('.sel,.all').prop("checked",false)
                $.ajax({
                    url: "../queryApp",
                    type: "post",
                    data: $('#searchFormId').serialize(),
                    dataType: "json",
                    success: (info) => {
                        this.appList = info.list;
                        this.pageList = info.navigateLastPage;
                    }
                })
            }, changePage(page) {
                this.queryAllApp(page);
            }, searchApp() {
                this.queryAllApp(1);
            }, queryAppType() {
                $.ajax({
                    url: "../queryAppType",
                    dataType: "json",
                    type: "get",
                    success: (list) => {
                        this.appTypeList = list;
                    }
                });
            }, queryAppPlatForm() {
                $.ajax({
                    url: "../queryAppPlatform",
                    dataType: "json",
                    type: "get",
                    success: (list) => {
                        this.appPlatformList = list;
                    }
                });
            }, deleteApp(id) {
                let flag = confirm("您确认要删除" + id + "号App吗?");
                if (flag) {
                    $.ajax({
                        url: "../deleteApp",
                        type: "get",
                        data: {id},
                        dataType: "text",
                        success: (text) => {
                            if (text == "ok") {
                                alert("删除成功！")
                                this.queryAllApp(1);
                            }
                        }
                    })
                }
            }, addApp() {
                $.ajax({
                    url: "../insertApp",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    data: new FormData($('#addFormId')[0]),
                    dataType: "text",
                    success: (text) => {
                        if (text == "ok") {
                            alert("添加成功！")
                            $('#addModal').modal('hide')
                            this.queryAllApp(1);
                        }
                    }
                })
            }, showApp(index) {
                this.updateApp = this.appList[index];
            }, updateAppa() {
                $.ajax({
                    url: "../updateApp",
                    type: "POST",
                    data: new FormData($('#updateFormId')[0]),
                    processData: false,
                    contentType: false,
                    dataType: "text",
                    success: (text) => {
                        if (text == "ok") {
                            alert("更新成功！")
                            $('#updateModal').modal('hide')
                            this.queryAllApp(1);
                        }
                    }
                })
            }, allSel() {
                $('.sel').prop("checked", $('.all').prop("checked"))
            }, checkSel() {
                let flag = true;
                $('.sel').each(function () {
                    if (!$(this).prop("checked")) {
                        flag = false;
                    }
                });
                $(".all").prop("checked", flag);
            },deleteManyApp(){

                let arr=[];
                $(".sel").each(function () {
                    if ($(this).prop("checked")) {
                        arr.push($(this).val())
                    }
                });
                if (arr.length > 0) {
                    let flag = confirm("您确认要删除这些App吗？")
                    if (flag) {
                        $.ajax({
                            url: "../deleteManyApp",
                            type: "GET",
                            traditional: true,
                            data: {arr},
                            dataType: "text",
                            success: (text) => {
                                if (text == "ok") {
                                    alert("删除成功！")
                                    this.queryAllApp(1);
                                } else {
                                    alert("删除失败！")
                                }
                            }
                        })
                    }
                } else {
                    alert("请先选择！")
                }
            }
        }, created() {
            this.queryAllApp(1);
            this.queryAppType();
            this.queryAppPlatForm();
        }
    })
</script>
</body>
</html>
